<template>
	<view>
		<view class="fixed">
			<cu-custom bgColor="text-white" :isBack="false" >
				<block slot="content">个人中心</block>
			</cu-custom>
		</view>
		<view class="flex align-center margin-left-sm header-info" :style = "{'margin-top': `${StatusBar + 30}px`}" >
			<image :src="isAuth? userInfo.avatar:'/static/logo.png'" mode="" class="cu-avatar xl round margin-left"></image>
			<view class="padding text-white">
				<block v-if="isAuth">
					<view class="padding-xs text-xl text-bold">
						{{ userInfo.nickName }}
					</view>
					<view class="padding-xs text-lg" v-if="userInfo.signature">
						{{userInfo.signature}}
					</view>
				</block>
				<button class="cu-btn round bg-red" @tap="goAuth" v-else>授权用户信息</button>
			</view>
		</view>
		<image src="/static/my-header.png" class="header-bg"></image>
		<view class="main-container flex ">
			<view class="main-item flex-sub" @tap="goNext('./collection')">
				<view class="icon-bg icon-bg1">
					<text class="icon-zu1316 iconfont left"></text>
				</view>
				<view class="item-name">我的收藏</view>
			</view>
			<view class="main-item flex-sub" @tap="goNext('./readRecord')">
				<view class="icon-bg icon-bg2">
					<text class="icon-zu1317 iconfont left"></text>
				</view>
				<view class="item-name">浏览记录</view>
			</view>
			<view class="main-item flex-sub" @tap="goNext('./msg')">
				<view class="icon-bg icon-bg3">
					<text class="icon-zu1318 iconfont left"></text>
				</view>
				<view class="item-name">我的消息</view>
			</view>
		</view>
		
		<view class="me-container">
			<view class="me-item flex justify-between" @tap="goNext('./person')">
				<text><text class="iconfont left left1"></text>修改资料</text>
				<text class="cuIcon-right right"></text>
			</view>
			<view class="me-item flex justify-between line-top" @tap="goNext('./feedback')">
				<text><text class="iconfont left left2"></text>用户反馈</text>
				<text class="cuIcon-right right"></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				isAuth: false,
				userInfo: {
					nickName: '',
					avatar: '',
					signature: ''
				}
			}
		},
		onLoad(options){

		},
		onShow(){
			const userInfo = this.$cache.get(this.$cache.key.userInfo)
			if (userInfo.avatar) {
				this.isAuth = true
				userInfo.avatar = this.$tools.getImg(userInfo.avatar)
			}
			this.userInfo = this.$tools.mergeObjSamePro(this.userInfo, userInfo)
		},
		methods: {
			goAuth() {
				this.$tools.go('/pages/my/auth')
			},
			goNext(url){
				if (this.isAuth) {
					this.$tools.go(url)
				} else {
					this.goAuth()
				}
			}
		}
	}
</script>

<style lang="scss">
	.fixed {
		position: fixed;
		z-index: 99;
	}
	.header-info{
		position: absolute;
		z-index: 1;
	}
	.header-bg{
		width: 100vw;
		height: 400rpx;
	}
	.main-container{
		width: 690rpx;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 30rpx;
		margin-top: -60rpx;
		background-color: #fff;
		.main-item{
			padding: 30rpx 0;
			text-align: center;
			.icon-bg{
				display: inline-block;
				width: 74rpx;
				height: 74rpx;
				line-height: 74rpx;
				
				border-radius: 50%;
				color: #fff;
			}
			.icon-bg1{
				background: linear-gradient(180deg, #F9840A 0%, #FFCB6E 100%);
				box-shadow: 0px 3rpx 11rpx rgba(249, 138, 19, 0.4);
			}
			.icon-bg2{
				background: linear-gradient(180deg, #545CFF 0%, #AEC0FD 100%);
				box-shadow: 0px 3rpx 11rpx rgba(23, 139, 255, 0.35);
			}
			.icon-bg3{
				background: linear-gradient(180deg, #BE4FF3 0%, #DDAEFB 100%);
				box-shadow: 0px 3rpx 11rpx rgba(159, 40, 217, 0.32);
			}
			.item-name{
				margin-top: 20rpx;
			}
		}
	}
	.me-container{
		width: 690rpx;
		background-color: #fff;
		margin: 30rpx auto;
		border-radius: 30rpx;
		.me-item{
			padding: 30rpx 0;
			margin: 0 30rpx;
			.left{
				margin-right: 10rpx;
				font-size: 30rpx;
				border-radius: 50%;
				opacity: 1;
			}
			.left1{
				color: #EC5C37;
			}
			.left2{
				color: #4497F7;
			}
			.left3{
				color: #5CC696;
			}
			.right{
				color: #ccc;
			}
		}
		.line-top{
			border-top: 1rpx solid #e5e5e5;
		}
	}
</style>
